<!DOCTYPE html>
<html lang="zh-cn" class="no-js">
	<head>
		<meta http-equiv="Content-Type">
		<meta content="text/html; charset=utf-8">
		<meta charset="utf-8">
		<title>花开了</title>
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<meta name="format-detection" content="email=no">
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/animations.css" />
		<script src="js/zepto.min.js"></script>
		<script src="js/touch.js"></script>
		<script src="js/music.js"></script>
		<script src="js/index.js"></script>
		<script type="text/javascript">
			var index = 0;
			var a = document.getElementsByClassName("page");
			//显示div
			function change() {
				// var a = document.getElementsByClassName("page");
				// index = 0;
				a[index].classList.replace("page-current","hide");
				index = index +1;
				a[index].classList.replace("hide","page-current");
				imgArray = a[index].getElementsByClassName('hide');
				length1 = imgArray.length;
				for (i=0; i<length1;i++){
					imgArray[0].classList.replace('hide','page-current');
					// console.log(i);
				}

			}
		</script>
	</head>
	<body>
		<div>
			<div class="page page-1-1 page-current">
				<div class="wrap">
					<img class="img_1 pt-page-moveFromTop" src="img/cover.png" />
<!--					<img class="img_2 pt-page-moveFromBottom" src="img/wording_cover.png" />-->
					<div id="zt" style="margin-top: 400px; font-size: 30px;">花开了</div>
					<img class="icon_up pt-page-moveIconUp" src="img/icon_up.png" onclick="change()"/>
					<h2 ></h2>
				</div>
			</div>
			<div class="page page-2-1 hide">
				<div class="wrap">
					<img class="img_wording hide pt-page-moveFromRight" src="img/wording.png" />
					<img class="img_circle hide pt-page-moveCircle" src="img/circle.png" />
					<img class="img_people hide pt-page-moveFromLeft" src="img/people.png" />
					<img class="img_dot1 hide pt-page-scaleUp" src="img/dot1.png" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left.png"  onclick="change()"/>
					<img class="img_floating hide pt-page-scaleUp" src="img/floating_develop.png" />
				</div>
			</div>

			<div class="page page-2-2 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/2-3-1.png" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left.png"  onclick="change()"/>
					<p >从前，我一个人走着</p>
				</div>
			</div>
			<div class="page page-2-3 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/2-4-1.png" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left.png"  onclick="change()"/>
					<p >草地上，一个人对着天空发呆</p>
				</div>
			</div>
			<div class="page page-2-4 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/2-5-1.png" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left_black.png"  onclick="change()"/>
					<p >公车上，一个人对着空座位沉思</p>
				</div>
			</div>
			<div class="page page-2-5 hide">
				<div class="wrap">
					<img class="img_content2 hide pt-page-flipInLeft" src="img/2-6-1.jpg" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left_black.png"  onclick="change()"/>
					<p >我曾想过遨游天空，与小鸟为伴</p>
				</div>
			</div>
			<div class="page page-2-6 hide">
				<div class="wrap">
					<img class="img_content2 hide pt-page-flipInLeft" src="img/2-7-1.jpg" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left_black.png"  onclick="change()"/>
					<p >也曾想过养些植物，与花草为伴</p>
				</div>
			</div>
			<div class="page page-2-7 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/2-8-1.jpg" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left.png"  onclick="change()"/>
					<p >可每当风雨来临，现实总让我认清，我依然孤独一人</p>
				</div>
			</div>
			<div class="page page-2-8 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/2-9-1.jpg" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left_black.png"  onclick="change()"/>
					<p >渐渐地，我习惯了</p>
				</div>
			</div>
			<div class="page page-2-9 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/2-10-1.png" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left_black.png"  onclick="change()"/>
					<p >习惯了一个人</p>
				</div>
			</div>
			<div class="page page-2-10 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/2-11-1.jpg" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left.png"  onclick="change()"/>
					<p >不管外界环境如何，我始终孑然一身，独自一人</p>
				</div>
			</div>
			<div class="page page-2-11 hide">
				<div class="wrap">
					<img class="img_content2 hide pt-page-flipInLeft" src="img/2-12-1.jpg" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left.png"  onclick="change()"/>
					<p >勇士的热血还在燃烧，只是我不再去寻找公主了</p>
				</div>
			</div>
			<div class="page page-2-12 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/2-13-1.jpg" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left_black.png"  onclick="change()"/>
					<p >这路上，我遇到过美丽风景</p>
				</div>
			</div>
			<div class="page page-2-13 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/2-14-1.jpg" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left_black.png"  onclick="change()"/>
					<p >能让我忘掉自我</p>
				</div>
			</div>
			<div class="page page-2-14 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/2-15-1.jpg" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left_black.png"  onclick="change()"/>
					<p >我曾想过一直如此</p>
				</div>
			</div>
			<div class="page page-2-15 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/2-16-1.jpg" />
					<img class="icon_up hide pt-page-moveIconUp" src="img/icon_up.png"  onclick="change()"/>
					<p >就这样，一个人，独自前行</p>
				</div>
			</div>
			<div class="page page-3-1 hide">
				<div class="wrap">
					<img class="img_wording hide pt-page-flipInBottom" src="img/wording_design.png" />
					<img class="img_circle hide pt-page-moveCircle" src="img/circle-design.png" />
					<img class="img_people pt-page-flipInTop hide" src="img/people_design.png" />
					<img class="img_dot1 hide pt-page-scaleUp" src="img/dot1.png" />
					<img class="img_floating2 hide pt-page-scaleUp" src="img/floating_production.png" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left.png"  onclick="change()"/>
				</div>
			</div>
			<div class="page page-3-2 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/3-2-1.jpg" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left.png"  onclick="change()"/>
					<p >后来，我认识了你</p>
				</div>
			</div>	
			<div class="page page-3-3 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/3-3-1.png" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left.png"  onclick="change()"/>
					<p >期待着上班，期待着见到你</p>
				</div>
			</div>
			<div class="page page-3-4 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/3-4-1.png" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left.png"  onclick="change()"/>
					<p >有好多话想跟你说，好多故事想跟你讲</p>
				</div>
			</div>
			<div class="page page-3-5 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/3-5-1.png" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left_black.png"  onclick="change()"/>
					<p >渐渐地，我走出了自闭</p>
				</div>
			</div>	
			<div class="page page-3-6 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/3-6-1.jpg" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left_black.png"  onclick="change()"/>
					<p >跟你一起逛街</p>
				</div>
			</div>	
			<div class="page page-3-7 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/3-7-1.jpg" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left.png"  onclick="change()"/>
					<p >一起看电影</p>
				</div>
			</div>	
<!--			<div class="page page-3-8 hide">-->
<!--				<div class="wrap">-->
<!--					<img class="img_content3 hide pt-page-flipInLeft" src="img/3-8-1.jpg" />-->
<!--					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left_black.png" />-->
<!--					<p >我们有着同样的观念</p>-->
<!--				</div>-->
<!--			</div>	-->
			<div class="page page-3-8 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/3-9-1.jpg" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left_black.png"  onclick="change()"/>
					<p >一起看书</p>
				</div>
			</div>	
			<div class="page page-3-9 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/3-10-1.jpg" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left_black.png"  onclick="change()"/>
					<p >一起研究美食</p>
				</div>
			</div>	
<!--			<div class="page page-3-11 hide">-->
<!--				<div class="wrap">-->
<!--					<img class="img_content hide pt-page-flipInLeft" src="img/3-11-1.jpg" />-->
<!--					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left_black.png" />-->
<!--					<p >文字</p>-->
<!--				</div>-->
<!--			</div>		-->
<!--			<div class="page page-3-12 hide">-->
<!--				<div class="wrap">-->
<!--					<img class="img_content3 hide pt-page-flipInLeft" src="img/3-12-1.png" />-->
<!--					<p >一起</p>-->
<!--					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left_black.png" />-->
<!--				</div>-->
<!--			</div>	-->
			<div class="page page-3-10 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/3-13-1.jpg" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left.png"  onclick="change()"/>
					<p >我想，如果能一直这样下去该多好</p>
				</div>
			</div>	
<!--			<div class="page page-3-14 hide">-->
<!--				<div class="wrap">-->
<!--					<img class="img_content hide pt-page-flipInLeft" src="img/3-14-1.gif" />-->
<!--					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left.png" />-->
<!--					<p >文字</p>-->
<!--				</div>-->
<!--			</div>	-->
			<div class="page page-3-11 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/3-15-1.png" />
					<img class="icon_up hide pt-page-moveIconUp" src="img/icon_up_black.png"  onclick="change()"/>
					<p >于是我伸出了手</p>
				</div>
			</div>				
			<div class="page page-4-1 hide">
				<div class="wrap">
					<img class="img_wording hide pt-page-moveFromTop" src="img/wording_production.png" />
					<img class="img_circle hide pt-page-moveCircle" src="img/circle-production.png" />
					<img class="img_people pt-page-moveFromBottom hide" src="img/people_production.png" />
					<img class="img_dot1 hide pt-page-scaleUp" src="img/dot1.png" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left.png"  onclick="change()"/>
					<img class="img_floating hide pt-page-scaleUp" src="img/floating_develop.png" />
					<img class="img_shadow hide pt-page-scaleUp" src="img/pic_shadow_production.png" />
				</div>
			</div>
			
			<div class="page page-4-2 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/4-2-1.png" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left.png"  onclick="change()"/>
					<p >虽然在一起日子不多，但是我们每周都会约会</p>
				</div>
			</div>	
			<div class="page page-4-3 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/4-3-1.png" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left.png"  onclick="change()"/>
					<p >吃东西</p>
				</div>
			</div>	
			<div class="page page-4-4 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/4-4-1.png" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left.png"  onclick="change()"/>
					<p >四处乱逛</p>
				</div>
			</div>	
			<div class="page page-4-5 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/4-5-1.jpg" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left.png"  onclick="change()"/>
					<p >你曾受过委屈</p>
				</div>
			</div>	

			<div class="page page-4-6 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/4-7-1.jpg" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left_black.png"  onclick="change()"/>
					<p >我十分自责没有能力保护你</p>
				</div>
			</div>	
			<div class="page page-4-7 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/4-8-1.jpg" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left.png"  onclick="change()"/>
					<p >我曾想过如果遇见更喜欢的人会怎样</p>
				</div>
			</div>	
			<div class="page page-4-8 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/4-9-1.png" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left_black.png"  onclick="change()"/>
					<p >可每次想到跟你在一起的点点滴滴</p>
				</div>
			</div>	
			<div class="page page-4-9 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/4-10-1.jpg" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left.png"  onclick="change()"/>
					<p >我与会更加坚定，你才是梦中城堡里的公主</p>
				</div>
			</div>
			<div class="page page-4-10 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/4-11-1.jpg" />
					<img class="icon_up hide pt-page-moveIconUp" src="img/icon_up.png"  onclick="change()"/>
					<p >屠龙的勇士，终于找到了公主</p>
				</div>
			</div>

			<div class="page page-5-1 hide">
				<div class="wrap">
					<img class="img_wording hide pt-page-flipInRight" src="img/wording_future.png" />
					<img class="img_circle hide pt-page-moveCircle" src="img/circle-future.png" />
					<img class="img_people pt-page-flipInBottom hide" src="img/people_future.png" />
					<img class="img_dot1 hide pt-page-scaleUp" src="img/dot1.png" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left.png"  onclick="change()"/>
					<img class="img_floating2 hide pt-page-scaleUp" src="img/floating_production.png" />
					<img class="img_shadow hide pt-page-scaleUp" src="img/pic_shadow_production.png" />
				</div>
			</div>
			<div class="page page-5-2 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/6-2-1.jpg" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left_black.png"  onclick="change()"/>
					<p >以后我们会一直在一起</p>
				</div>
			</div>
			<div class="page page-5-3 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/6-3-1.png" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left.png"  onclick="change()"/>
					<p >我会记得每一个纪念日</p>
				</div>
			</div>
			<div class="page page-5-4 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/6-4-1.png" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left.png"  onclick="change()"/>
					<p >我会变的更好</p>
				</div>
			</div>
			<div class="page page-5-5 hide">
				<div class="wrap">
					<img class="img_content hide pt-page-flipInLeft" src="img/6-5-1.jpg" />
					<img class="icon_up hide pt-page-moveIconUp" src="img/icon_up_black.png"  onclick="change()"/>
					<p >好让你无怨无悔的嫁给我</p>
				</div>
			</div>
			<div class="page page-6-1 hide">
				<div class="wrap">
					<img class="img_wording hide pt-page-flipInRight" src="img/wording_yan.png" />
					<img class="img_circle hide pt-page-moveCircle" src="img/circle-yan.png" />
					<img class="img_people pt-page-flipInBottom hide" src="img/people_yan.png" />
					<img class="img_dot1 hide pt-page-scaleUp" src="img/dot1.png" />
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left.png"  onclick="change()"/>
					<img class="img_floating2 hide pt-page-scaleUp" src="img/floating_production.png" />
					<img class="img_shadow hide pt-page-scaleUp" src="img/pic_shadow_production.png" />
				</div>
			</div>
			<div class="page page-6-2 hide">
				<div class="wrap">
					<a href="http://mp.weixin.qq.com/s?__biz=MjM5NjQxODI4OQ==&mid=202839237&idx=1&sn=6edbaed8f61736a28e44183721b8d15c#rd" target="view_window"><img class="img_content hide pt-page-flipInLeft" src="img/7-background.png" /></a>
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left.png"  onclick="change()"/>
					<p7 >傻丫头，以后有事一定要告诉我，不要什么都想着自己扛</p7>
				</div>
			</div>
			<div class="page page-6-3 hide">
				<div class="wrap">
					<a href="http://www.iqiyi.com/v_19rrgx6dow.html?x" target="view_window"><img class="img_content hide pt-page-flipInLeft" src="img/7-background.png" /></a>
					<img class="icon_left hide pt-page-moveIconLeft" src="img/icon_left.png"  onclick="change()"/>
					<p7 >以后我会一直陪伴着你，你的手可别松开哦</p7>
				</div>
			</div>
			<div class="page page-6-4 hide">
				<div class="wrap">
					<a href="http://mp.weixin.qq.com/s?__biz=MjM5MjIzMDI1OQ==&mid=202712999&idx=1&sn=5a0379f39f5de67159f95dd6fbed4a33#rd" target="view_window"><img class="img_content hide pt-page-flipInLeft" src="img/7-background.png" /></a>
					<img class="icon_end hide pt-page-flipInLeft" src="img/icon_end.png"  onclick="change()"/>
					<p7 >你猜下面还有吗？</p7>
				</div>
			</div>
		</div>
		<div class="page page-7-1 hide">
			<div class="wrap"  style="margin-top: 217px;">
			<a href="love.html">点我</a>
			</div>
		</div>
		<div class="play_music" onclick="SwitchPlayMusic()">
			<audio id="my_audio" src="任意门.m4a" autoplay="autoplay" loop="loop" preload="auto"></audio>
			<img id="img_play_music" class="img_play_music hide" src="img/play.png" />
			<img id="img_pause_music" class="img_pause_music hide" src="img/silent.png" />
		</div>	
		<script src="http://s11.cnzz.com/stat.php?id=1253893193&web_id=1253893193" language="JavaScript"></script>
	</body>
</html>
